/*
 * Copyright (C) 2020 Jimmy Hogoboom
 *
 * This file is part of Limitlist.
 *
 * Limitlist is free software: you can redistribute it and/or modify
 * it under the terms of the Affero GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * Limitlist is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * Affero GNU General Public License for more details.
 *
 * You should have received a copy of the Affero GNU General Public License
 * along with Limitlist.  If not, see <https://www.gnu.org/licenses/>.
 */

// SPDX-License-Identifier: AGPL-3.0-or-later

import React from 'react';
import classNames from 'classnames';
import { SortableContainer } from 'react-sortable-hoc';
import ProductListItemSortable from 'components/ProductListItem/ProductListItemSortable';
import { ProductListItemInput } from 'components/ProductListItem/types';

export interface ProductListSortableContainerProps {
  items: ProductListItemInput[],
  editingItemIds: string[],
  isSorting: boolean,
  onChange: (item: ProductListItemInput) => void,
  onDelete: (item: ProductListItemInput) => void,
};

const ProductListSortableContainer = SortableContainer((props: ProductListSortableContainerProps) => (
  <div className="list-item">
    {props.items.map((i: ProductListItemInput, index) => (
      <ProductListItemSortable
        className={classNames('list-item', { 'select-none': props.isSorting })}
        key={i.id}
        index={index}
        value={i}
        editing={props.editingItemIds.includes(i.id)}
        onChange={props.onChange}
        onDelete={props.onDelete}
      />
    ))}
  </div>
));

export default ProductListSortableContainer;
